<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>加入文明实践 - 新时代文明实践智慧服务系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            background: #f5f5f5;
            overflow-x: hidden;
            padding-top: 44px;
            padding-bottom: 60px;
        }
        
        /* 顶部导航栏 */
        .navbar {
            background: linear-gradient(to bottom, #fce4ec 0%, #fff3e0 100%);
            color: #ff6b00;
            height: 44px;
            padding: 0 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            box-shadow: 0 2px 8px rgba(255,107,0,0.2);
        }
        
        .navbar-left {
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
        }
        
        .back-btn {
            font-size: 18px;
        }
        
        .navbar-title {
            font-size: 16px;
            font-weight: bold;
        }
        
        /* 头部介绍区域 */
        .header-section {
            background: linear-gradient(135deg, #ffd54f 0%, #ffecb3 100%);
            padding: 30px 20px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        
        .header-section::before {
            content: '';
            position: absolute;
            width: 200px;
            height: 200px;
            background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
            top: -100px;
            right: -50px;
            border-radius: 50%;
        }
        
        .header-content {
            position: relative;
            z-index: 2;
        }
        
        .header-icon {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, #ff6b00, #ffa726);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 36px;
            color: white;
            margin: 0 auto 20px;
            box-shadow: 0 8px 20px rgba(255, 107, 0, 0.3);
        }
        
        .header-title {
            font-size: 24px;
            font-weight: bold;
            color: #ff6b00;
            margin-bottom: 10px;
        }
        
        .header-subtitle {
            font-size: 14px;
            color: #666;
            line-height: 1.5;
        }
        
        /* 申请类型选择 */
        .type-selection {
            background: white;
            margin: 20px 15px;
            border-radius: 16px;
            padding: 20px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
        }
        
        .section-title {
            font-size: 16px;
            font-weight: bold;
            color: #333;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .type-cards {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
        }
        
        .type-card {
            background: #f8f9fa;
            border-radius: 12px;
            padding: 20px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s;
            border: 2px solid transparent;
        }
        
        .type-card.active {
            background: linear-gradient(135deg, #fff3e0, #ffecb3);
            border-color: #ff6b00;
            transform: translateY(-2px);
        }
        
        .type-icon {
            width: 50px;
            height: 50px;
            background: linear-gradient(135deg, #ff6b00, #ffa726);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            color: white;
            margin: 0 auto 10px;
        }
        
        .type-name {
            font-size: 14px;
            font-weight: bold;
            color: #333;
            margin-bottom: 5px;
        }
        
        .type-desc {
            font-size: 12px;
            color: #666;
            line-height: 1.4;
        }
        
        /* 申请表单 */
        .form-section {
            background: white;
            margin: 0 15px 20px;
            border-radius: 16px;
            padding: 20px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-label {
            font-size: 14px;
            font-weight: bold;
            color: #333;
            margin-bottom: 8px;
            display: block;
        }
        
        .form-input, .form-textarea, .form-select {
            width: 100%;
            padding: 12px 15px;
            border: 2px solid #f0f2f5;
            border-radius: 8px;
            font-size: 14px;
            transition: border-color 0.3s;
            background: #f8f9fa;
        }
        
        .form-input:focus, .form-textarea:focus, .form-select:focus {
            border-color: #ff6b00;
            outline: none;
            background: white;
        }
        
        .form-textarea {
            resize: vertical;
            min-height: 80px;
        }
        
        .form-row {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
        }
        
        /* 技能标签 */
        .skill-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 10px;
        }
        
        .skill-tag {
            padding: 6px 12px;
            background: #f0f2f5;
            border-radius: 15px;
            font-size: 12px;
            color: #666;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .skill-tag.active {
            background: linear-gradient(135deg, #ff6b00, #ffa726);
            color: white;
        }
        
        /* 上传区域 */
        .upload-area {
            border: 2px dashed #ddd;
            border-radius: 8px;
            padding: 30px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .upload-area:hover {
            border-color: #ff6b00;
            background: #fff3e0;
        }
        
        .upload-icon {
            font-size: 36px;
            color: #999;
            margin-bottom: 10px;
        }
        
        .upload-text {
            font-size: 14px;
            color: #666;
        }
        
        /* 提交按钮 */
        .submit-section {
            padding: 20px 15px;
        }
        
        .submit-btn {
            width: 100%;
            background: linear-gradient(135deg, #ff6b00, #ffa726);
            color: white;
            border: none;
            padding: 15px;
            border-radius: 25px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .submit-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(255, 107, 0, 0.4);
        }
        
        .submit-btn:disabled {
            background: #ccc;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }
        
        /* 申请须知 */
        .notice-section {
            background: white;
            margin: 0 15px 20px;
            border-radius: 16px;
            padding: 20px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
        }
        
        .notice-list {
            list-style: none;
            padding: 0;
        }
        
        .notice-item {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            margin-bottom: 10px;
            font-size: 13px;
            line-height: 1.5;
            color: #666;
        }
        
        .notice-item::before {
            content: "•";
            color: #ff6b00;
            font-weight: bold;
            margin-top: 2px;
        }
        
        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: white;
            display: flex;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
            z-index: 100;
        }
        
        .nav-item {
            flex: 1;
            text-align: center;
            padding: 8px 0;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .nav-icon {
            font-size: 20px;
            margin-bottom: 2px;
        }
        
        .nav-label {
            font-size: 10px;
            color: #999;
        }
        
        .nav-item.active .nav-icon {
            color: #ff6b00;
        }
        
        .nav-item.active .nav-label {
            color: #ff6b00;
        }
    </style>
</head>
<body>
    <!-- 顶部导航栏 -->
    <div class="navbar">
        <div class="navbar-left" onclick="goBack()">
            <span class="back-btn">←</span>
            <span class="navbar-title">加入文明实践</span>
        </div>
    </div>
    
    <!-- 头部介绍区域 -->
    <div class="header-section">
        <div class="header-content">
            <div class="header-icon">👥</div>
            <div class="header-title">加入文明实践大家庭</div>
            <div class="header-subtitle">
                成为文明实践志愿者，用行动传递爱心，用服务点亮社区<br>
                让我们一起为建设文明和谐社会贡献力量
            </div>
        </div>
    </div>
    
    <!-- 申请类型选择 -->
    <div class="type-selection">
        <div class="section-title">
            <span>📋</span>
            <span>选择申请类型</span>
        </div>
        <div class="type-cards">
            <div class="type-card active" onclick="selectType(this, 'volunteer')">
                <div class="type-icon">🙋‍♀️</div>
                <div class="type-name">志愿者申请</div>
                <div class="type-desc">成为普通志愿者，参与各类文明实践活动</div>
            </div>
            <div class="type-card" onclick="selectType(this, 'instructor')">
                <div class="type-icon">👩‍🏫</div>
                <div class="type-name">讲师申请</div>
                <div class="type-desc">加入师资库，提供专业知识和技能培训</div>
            </div>
        </div>
    </div>
    
    <!-- 申请表单 -->
    <div class="form-section">
        <div class="section-title">
            <span>📝</span>
            <span>基本信息</span>
        </div>
        
        <div class="form-group">
            <label class="form-label">姓名 *</label>
            <input type="text" class="form-input" placeholder="请输入您的真实姓名" required>
        </div>
        
        <div class="form-row">
            <div class="form-group">
                <label class="form-label">性别 *</label>
                <select class="form-select" required>
                    <option value="">请选择</option>
                    <option value="male">男</option>
                    <option value="female">女</option>
                </select>
            </div>
            <div class="form-group">
                <label class="form-label">年龄 *</label>
                <input type="number" class="form-input" placeholder="年龄" min="16" max="80" required>
            </div>
        </div>
        
        <div class="form-group">
            <label class="form-label">联系电话 *</label>
            <input type="tel" class="form-input" placeholder="请输入手机号码" required>
        </div>
        
        <div class="form-group">
            <label class="form-label">身份证号 *</label>
            <input type="text" class="form-input" placeholder="请输入身份证号码" required>
        </div>
        
        <div class="form-group">
            <label class="form-label">居住地址</label>
            <input type="text" class="form-input" placeholder="请输入详细地址">
        </div>
        
        <div class="form-row">
            <div class="form-group">
                <label class="form-label">学历</label>
                <select class="form-select">
                    <option value="">请选择</option>
                    <option value="primary">小学</option>
                    <option value="middle">初中</option>
                    <option value="high">高中</option>
                    <option value="college">大专</option>
                    <option value="bachelor">本科</option>
                    <option value="master">硕士</option>
                    <option value="doctor">博士</option>
                </select>
            </div>
            <div class="form-group">
                <label class="form-label">职业</label>
                <input type="text" class="form-input" placeholder="请输入职业">
            </div>
        </div>
        
        <div class="form-group">
            <label class="form-label">特长技能</label>
            <div class="skill-tags">
                <span class="skill-tag" onclick="toggleSkill(this)">文艺表演</span>
                <span class="skill-tag" onclick="toggleSkill(this)">心理咨询</span>
                <span class="skill-tag" onclick="toggleSkill(this)">医疗护理</span>
                <span class="skill-tag" onclick="toggleSkill(this)">法律咨询</span>
                <span class="skill-tag" onclick="toggleSkill(this)">教育培训</span>
                <span class="skill-tag" onclick="toggleSkill(this)">环保宣传</span>
                <span class="skill-tag" onclick="toggleSkill(this)">科技服务</span>
                <span class="skill-tag" onclick="toggleSkill(this)">手工制作</span>
                <span class="skill-tag" onclick="toggleSkill(this)">摄影摄像</span>
                <span class="skill-tag" onclick="toggleSkill(this)">其他</span>
            </div>
        </div>
        
        <div class="form-group">
            <label class="form-label">申请理由</label>
            <textarea class="form-textarea" placeholder="请简述您加入文明实践的原因和期望贡献的能力"></textarea>
        </div>
        
        <div class="form-group">
            <label class="form-label">可参与时间</label>
            <textarea class="form-textarea" placeholder="请描述您可以参与志愿服务的时间安排"></textarea>
        </div>
        
        <div class="form-group">
            <label class="form-label">相关证件上传</label>
            <div class="upload-area" onclick="uploadFile()">
                <div class="upload-icon">📎</div>
                <div class="upload-text">点击上传身份证、相关资格证书等</div>
            </div>
        </div>
    </div>
    
    <!-- 申请须知 -->
    <div class="notice-section">
        <div class="section-title">
            <span>📢</span>
            <span>申请须知</span>
        </div>
        <ul class="notice-list">
            <li class="notice-item">申请者需年满16周岁，身体健康，品行端正</li>
            <li class="notice-item">提交的个人信息必须真实有效，如有虚假将取消申请资格</li>
            <li class="notice-item">申请提交后，我们将在3-5个工作日内进行审核</li>
            <li class="notice-item">审核通过后将收到短信通知，请保持手机畅通</li>
            <li class="notice-item">成为志愿者后需参加相关培训和活动</li>
            <li class="notice-item">志愿服务时间将记录在案，可获得相应积分奖励</li>
        </ul>
    </div>
    
    <!-- 提交按钮 -->
    <div class="submit-section">
        <button class="submit-btn" onclick="submitApplication()">提交申请</button>
    </div>
    
    <!-- 底部导航 -->
    <div class="bottom-nav">
        <div class="nav-item" onclick="location.href='index.html'">
            <div class="nav-icon">🏠</div>
            <div class="nav-label">首页</div>
        </div>
        <div class="nav-item" onclick="location.href='venues.html'">
            <div class="nav-icon">📍</div>
            <div class="nav-label">阵地</div>
        </div>
        <div class="nav-item" onclick="location.href='activities.html'">
            <div class="nav-icon">📅</div>
            <div class="nav-label">活动</div>
        </div>
        <div class="nav-item" onclick="location.href='services.html'">
            <div class="nav-icon">🎁</div>
            <div class="nav-label">服务</div>
        </div>
        <div class="nav-item" onclick="location.href='profile.html'">
            <div class="nav-icon">👤</div>
            <div class="nav-label">我的</div>
        </div>
    </div>
    
    <script>
        let selectedType = 'volunteer';
        
        // 返回上一页
        function goBack() {
            history.back();
        }
        
        // 选择申请类型
        function selectType(element, type) {
            document.querySelectorAll('.type-card').forEach(card => {
                card.classList.remove('active');
            });
            element.classList.add('active');
            selectedType = type;
            
            // 根据类型调整表单
            if (type === 'instructor') {
                // 如果是讲师申请，可以添加更多专业相关字段
                console.log('切换到讲师申请模式');
            }
        }
        
        // 切换技能标签
        function toggleSkill(element) {
            element.classList.toggle('active');
        }
        
        // 文件上传
        function uploadFile() {
            const input = document.createElement('input');
            input.type = 'file';
            input.multiple = true;
            input.accept = 'image/*,.pdf,.doc,.docx';
            input.onchange = function(e) {
                const files = Array.from(e.target.files);
                alert(`已选择 ${files.length} 个文件：\n${files.map(f => f.name).join('\n')}\n\n文件上传功能开发中...`);
            };
            input.click();
        }
        
        // 提交申请
        function submitApplication() {
            const requiredFields = document.querySelectorAll('[required]');
            let isValid = true;
            
            requiredFields.forEach(field => {
                if (!field.value.trim()) {
                    isValid = false;
                    field.style.borderColor = '#ff4d4f';
                } else {
                    field.style.borderColor = '#f0f2f5';
                }
            });
            
            if (!isValid) {
                alert('请填写所有必填项！');
                return;
            }
            
            // 获取选中的技能
            const selectedSkills = Array.from(document.querySelectorAll('.skill-tag.active'))
                .map(tag => tag.textContent);
            
            alert(`申请提交成功！\n\n申请类型：${selectedType === 'volunteer' ? '志愿者' : '讲师'}\n选择技能：${selectedSkills.join(', ')}\n\n我们将在3-5个工作日内完成审核，请耐心等待。\n审核结果将通过短信通知您。`);
        }
        
        // 表单验证
        document.addEventListener('DOMContentLoaded', function() {
            const inputs = document.querySelectorAll('.form-input, .form-textarea, .form-select');
            inputs.forEach(input => {
                input.addEventListener('blur', function() {
                    if (this.hasAttribute('required') && !this.value.trim()) {
                        this.style.borderColor = '#ff4d4f';
                    } else {
                        this.style.borderColor = '#f0f2f5';
                    }
                });
                
                input.addEventListener('input', function() {
                    if (this.style.borderColor === 'rgb(255, 77, 79)') {
                        this.style.borderColor = '#f0f2f5';
                    }
                });
            });
        });
        
        // 页面加载动画
        document.addEventListener('DOMContentLoaded', function() {
            const sections = document.querySelectorAll('.type-selection, .form-section, .notice-section');
            sections.forEach((section, index) => {
                section.style.opacity = '0';
                section.style.transform = 'translateY(20px)';
                setTimeout(() => {
                    section.style.transition = 'all 0.5s ease';
                    section.style.opacity = '1';
                    section.style.transform = 'translateY(0)';
                }, index * 100);
            });
        });
    </script>
</body>
</html>